<template>
  <div class="select-options-test">
    <h2>Select组件选项配置测试</h2>

    <div class="test-section">
      <h3>1. 测试Select字段编辑</h3>
      <Button @click="testSelectFieldEdit"> 测试编辑Select字段 </Button>

      <div v-if="showFieldEditor" class="field-editor-container">
        <FieldEditor
          :field="testField"
          @update="handleFieldUpdate"
          @cancel="showFieldEditor = false"
        />
      </div>
    </div>

    <div class="test-section">
      <h3>2. 当前字段配置</h3>
      <pre>{{ JSON.stringify(testField, null, 2) }}</pre>
    </div>

    <div class="test-section">
      <h3>3. 更新后的字段配置</h3>
      <pre>{{ JSON.stringify(updatedField, null, 2) }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import FieldEditor from './FieldEditor.vue';

const showFieldEditor = ref(false);
const updatedField = ref(null);

// 测试用的Select字段
const testField = ref({
  id: 'test_select_1',
  name: 'test_select',
  label: '测试选择框',
  type: 'ENUM',
  required: true,
  defaultValue: 'option1',
  options: [
    { label: '选项1', value: 'option1' },
    { label: '选项2', value: 'option2' },
    { label: '选项3', value: 'option3' },
  ],
  validation: {},
  uiConfig: {
    placeholder: '请选择选项',
    helpText: '这是一个测试选择框',
    width: '',
    showLabel: true,
    layout: 'horizontal',
  },
});

const testSelectFieldEdit = () => {
  showFieldEditor.value = true;
};

const handleFieldUpdate = (field: any) => {
  updatedField.value = field;
  showFieldEditor.value = false;
  console.log('字段更新:', field);
};
</script>

<style scoped>
.select-options-test {
  padding: 20px;
}

.test-section {
  padding: 16px;
  margin-bottom: 30px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.test-section h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #262626;
}

.field-editor-container {
  padding: 16px;
  margin-top: 16px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

pre {
  padding: 12px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.4;
  background: #f5f5f5;
  border-radius: 4px;
}
</style>
